<script lang="ts" setup>
import { reactive, ref, watch, toRefs } from "vue"
import { ElTable, ElMessageBox, FormInstance, type FormRules, ElMessage } from "element-plus"
import { formatDateTime } from "@/utils"
import { useCascaderAreaData } from "@vant/area-data"
// 接口
import {
  createWebSteDataApi,
  deleteWebSteDataApi,
  updateWebSteDataApi,
  getWebSteDataApi,
  getWebSteSuperDataApi,
  webCommissionAddApi,
  webCommissionQueryApi,
  updateStateDataApi,
  copyWebCombo,
  webdownSet
} from "@/api/webSet"
import { type getTeamData } from "@/api/team/types/team"
import { usePagination } from "@/hooks/usePagination"
import { Search, Refresh, Download } from "@element-plus/icons-vue"
import Editor from "@/components/RichText/index.vue"
import { useUserStore } from "@/store/modules/user" // 用户信息
import { getUserIdList } from "@/api/combo" // 代理数据
const userStore = useUserStore() // 用户信息
const loading = ref(true)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
defineOptions({
  name: "WebProductSet"
})

const DATA = reactive<any>({
  formDatastate: "下架套餐",
  formData: { details: "" },
  formYJ: {
    benwang: [
      {
        name: "",
        key: ""
      }
    ],
    yiwang: [
      {
        name: "",
        key: ""
      }
    ]
  } // 佣金字段
})
const { formData, formYJ, formDatastate } = toRefs(DATA)
const formRef = ref<FormInstance | null>(null)
const formRefYJ = ref<FormInstance | null>(null)
const dialogVisible = ref<boolean>(false)
const dialogVisibleYJ = ref<boolean>(false)
const dialogVisibleYJXQ = ref<boolean>(false)
const areaoptions = useCascaderAreaData()
const props = {
  multiple: true,
  checkStrictly: true,
  label: "text",
  value: "text"
}
const props2 = {
  // multiple: true,
  checkStrictly: true,
  label: "text",
  value: "text"
}
const rules: FormRules = reactive({
  name: [{ required: true, trigger: "blur", message: "请输入产品名称" }],
  team: [{ required: true, trigger: "blur", message: "请选择可销售团队" }],
  state: [{ required: true, trigger: "blur", message: "请选择是否上下架" }],
  // code: [{ required: true, trigger: "blur", message: "请输入上级编码" }],
  var1: [{ required: true, trigger: "blur", message: "请选择上级" }],
  var2: [{ required: true, trigger: "blur", message: "请选择安装区域" }],
  executeTime: [{ required: true, trigger: "blur", message: "请选择时间" }],
  jsType: [{ required: true, trigger: "change", message: "请选择结算类型" }],
  executeMoney: [
    { required: true, trigger: "change", message: "请输入金额" },
    {
      pattern: /^[+-]?(\d+([.]\d*)?([eE][+-]?\d+)?|[.]\d+([eE][+-]?\d+)?)$/,
      message: "只能输入数字",
      trigger: "blur"
    }
  ],
  yearFee: [
    { required: true, trigger: "blur", message: "请输入金额" },
    {
      pattern: /^[+-]?(\d+([.]\d*)?([eE][+-]?\d+)?|[.]\d+([eE][+-]?\d+)?)$/,
      message: "只能输入数字",
      trigger: "blur"
    }
  ],
  testFee: [
    { required: true, trigger: "blur", message: "请输入金额" },
    {
      pattern: /^[+-]?(\d+([.]\d*)?([eE][+-]?\d+)?|[.]\d+([eE][+-]?\d+)?)$/,
      message: "只能输入数字",
      trigger: "blur"
    }
  ],
  tvFee: [
    { required: true, trigger: "blur", message: "请输入金额" },
    {
      pattern: /^[+-]?(\d+([.]\d*)?([eE][+-]?\d+)?|[.]\d+([eE][+-]?\d+)?)$/,
      message: "只能输入数字",
      trigger: "blur"
    }
  ],
  executeMoneyTWO: [{ required: true, trigger: "change", message: "请输入金额" }],
  type: [{ required: true, trigger: "change", message: "请选择类型" }],
  isPhoto: [{ required: true, trigger: "change", message: "请选择是否上传图片" }],
  // areaTWo: [{ required: true, trigger: "change", message: "请选择区域" }],
  operator: [{ required: true, trigger: "change", message: "请选择运营商" }]
  // kb: [{ required: true, trigger: "change", message: "请选择流量" }],
  // leix: [{ required: true, trigger: "change", message: "请选择类型" }],
  // moneyOne: [
  //   { required: true, trigger: "blur", message: "请输入金额" },
  //   {
  //     pattern: /^[+-]?(\d+([.]\d*)?([eE][+-]?\d+)?|[.]\d+([eE][+-]?\d+)?)$/,
  //     message: "只能输入数字",
  //     trigger: "blur"
  //   }
  // ],
  // moneyTwo: [
  //   { required: true, trigger: "blur", message: "请输入数字" },
  //   {
  //     pattern: /^[+-]?(\d+([.]\d*)?([eE][+-]?\d+)?|[.]\d+([eE][+-]?\d+)?)$/,
  //     message: "只能输入数字",
  //     trigger: "blur"
  //   }
  // ],
  // shij: [{ required: true, trigger: "change", message: "请选择年月" }]
})
const addProduct = () => {
  dialogTitle.value = "新增"
  dialogVisible.value = true
  formYJ.value.webId = ""
  resetForm()
  formData.value = { details: "" }
  formData.value.userIds = []
}
//** 二维数组转字符串 */
const arrToStr = (objarr: any) => {
  const arrLen = objarr.length
  let row = "["
  for (let i = 0; i < arrLen; i++) {
    row += "["
    for (let j = 0; j < objarr[i].length; j++) {
      row += `'${objarr[i][j]}'`
      if (j < objarr[i].length - 1) {
        row += ","
      }
    }
    row += "]"
    if (i < arrLen - 1) {
      row += ","
    }
  }
  row += "]"
  return row
}

// #region 改
const dialogTitle = ref("")
const teamId = ref<undefined | string>(undefined)
const handleUpdate = (row: any) => {
  dialogTitle.value = "修改"
  console.log(row, 88)
  formYJ.value.webId = row.id
  teamId.value = row.id
  formData.value = JSON.parse(JSON.stringify(row))
  if (row.team) {
    formData.value.team = row.team.split(",")
  }
  if (row.var2) {
    formData.value.var2 = eval(row.var2)
  }
  if (row.userIds) {
    formData.value.userIds = row.userIds.split(",")
  } else {
    formData.value.userIds = []
  }
  console.log(row.userIds, 77)

  dialogVisible.value = true
}
// 下架套餐
const handleupdateState = (row: any) => {
  if (searchData.state == "上架") {
    formData.value.state = "下架"
    updateStateDataApi({
      id: row.id,
      state: formData.value.state
    }).then(() => {
      ElMessage.success("下架成功")
      getList()
    })
  } else if (searchData.state == "下架") {
    formData.value.state = "上架"
    updateStateDataApi({
      id: row.id,
      state: formData.value.state
    }).then(() => {
      ElMessage.success("上架成功")
      getList()
    })
  }
}
// 查看详情
const handleSee = (row: any) => {
  dialogTitle.value = "详情"
  teamId.value = row.id
  formData.value = JSON.parse(JSON.stringify(row))
  if (row.team) {
    formData.value.team = row.team.split(",")
  }
  if (row.var2) {
    formData.value.var2 = eval(row.var2)
  }
  if (row.userIds) {
    formData.value.userIds = row.userIds.split(",")
  }
  dialogVisible.value = true
}
// #endregion

// #region  删
const handleDelete = (row: getTeamData) => {
  ElMessageBox.confirm(`您确定要删除:${row.name}吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteWebSteDataApi(row.id).then(() => {
      ElMessage.success("删除成功")
      getList()
    })
  })
}
// #endregion

// #region 产品名称 赋值
const GBareaTwo = () => {
  formRef.value?.validateField(
    ["areaTWo", "yunying", "kb", "leix", "moneyOne", "moneyTwo", "shij"],
    (valid: boolean) => {
      if (valid) {
        if (formData.value.beiz !== undefined) {
          formData.value.name =
            formData.value.areaTWo[formData.value.areaTWo.length - 1].replace(/省|市|自治区|特别行政区|区/g, "") +
            formData.value.yunying +
            formData.value.kb +
            formData.value.leix +
            "——" +
            formData.value.moneyOne +
            "元包" +
            formData.value.moneyTwo +
            formData.value.shij +
            formData.value.beiz
        } else {
          formData.value.name =
            formData.value.areaTWo[formData.value.areaTWo.length - 1].replace(/省|市|自治区|特别行政区|区/g, "") +
            formData.value.yunying +
            formData.value.kb +
            formData.value.leix +
            "——" +
            formData.value.moneyOne +
            "元包" +
            formData.value.moneyTwo +
            formData.value.shij
        }
      }
    }
  )
}
// #engregion

// #region 增
const handleCreate = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (teamId.value === undefined) {
        createWebSteDataApi({
          ...formData.value,
          team: formData.value.team.join(),
          var2: arrToStr(formData.value.var2),
          userIds: formData.value.userIds.join(),
          state: "上架"
        }).then(() => {
          ElMessage.success("新增成功")
          dialogVisible.value = false
          getList()
        })
      } else {
        updateWebSteDataApi({
          ...formData.value,
          team: formData.value.team.join(),
          userIds: formData.value.userIds.join(),
          var2: arrToStr(formData.value.var2)
        }).then(() => {
          ElMessage.success("修改成功")
          dialogVisible.value = false
          getList()
        })
      }
    } else {
      return false
    }
  })
}

const resetForm = () => {
  teamId.value = undefined
  formRef.value?.resetFields()
  formData.value.details = "<p><br/></p>"
  formData.value.userIds = []
  clearValidate()
}
// #endregion
const getMsg = (val: any) => {
  if (val) {
    formData.value.details = val
  }
}
// #region 查
const tableTotal = ref<number>()
const tableData = ref<getTeamData[]>([])
const getList = () => {
  getWebSteDataApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    name: searchData.name,
    var1: searchData.var1,
    area: searchData.area.join(","),
    state: searchData.state
  })
    .then((res: any) => {
      tableData.value = res.data.list
      tableTotal.value = res.data.total
      loading.value = false
    })
    .catch(() => {
      tableData.value = []
      loading.value = false
    })
}
// #endregion

//上级来源

const superList = ref<any>([])
const getList1 = () => {
  getWebSteSuperDataApi({
    page: 1,
    size: 100
  })
    .then((res: any) => {
      superList.value = res.data.list
    })
    .catch(() => {
      superList.value = []
    })
}
getList1()

// #region 搜索内容
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive<any>({
  name: "",
  var1: "",
  area: [],
  state: "上架"
})
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getList()
    console.log("重置")
  }
  paginationData.currentPage = 1
}
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    getList()
    console.log("查询")
  }
  paginationData.currentPage = 1
}
// #endregion

/**团队数据获取 */
import { useTeamStore } from "@/store/modules/team"
import { useDepartmentStore } from "@/store/modules/department"
const teamStore = useTeamStore()
const departmentStore = useDepartmentStore()
const teamList = ref<any>([])
/**部门数据获取 */
const departmentList = ref<any>([])
/**部门团队组合数据 */
const departTeam = ref<any>([])
const props1 = {
  multiple: true,
  emitPath: false,
  // checkStrictly: true,
  label: "name",
  value: "name"
}
/**监听 team 缓存 */
const DTEFFECT = async () => {
  await teamStore.getTeamFn()
  await departmentStore.getDepartmentFn()
}
DTEFFECT()
watch(
  [() => teamStore.teamListStore],
  (newValue) => {
    teamList.value = newValue.flat()
  },
  {
    immediate: true
  }
)
/**team END */
/**监听 department 缓存 */
watch(
  [() => departmentStore.departmentListStore],
  (newValue) => {
    departmentList.value = newValue.flat()
    /**实现部门团队数据合并 */
    departTeam.value = departmentList.value.map((item: any) => ({
      ...item,
      children: teamList.value.filter((childrenItem: any) => childrenItem.source === item.name)
    }))
    /**部门下无团队禁选 */
    departTeam.value.forEach((item: any) => {
      if (!item.children.length) {
        item.disabled = true
      }
      return item
    })
  },
  {
    immediate: true
  }
)
const formatterSuperName = (row: any, column: any, celValue: any) => {
  superList.value.filter((item: any) => {
    if (item.id == row.var1) {
      celValue = item.name
    }
  })
  return celValue
}
const activeName = ref<any>("shelf")
const handleClick = (tab: any) => {
  paginationData.currentPage = 1

  if (tab.paneName == "shelf") {
    searchData.state = "上架"
    formDatastate.value = "下架套餐"
  }
  if (tab.paneName == "offShelf") {
    searchData.state = "下架"
    formDatastate.value = "上架套餐"
  }

  getList()
}

const disabledDate = (time: Date) => {
  return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000
}
// #region 佣金配置
const tableDataYJGS = ref() // 公司佣金历史记录
const tableDataYJDP = ref() // 店铺佣金历史记录
const handleSeeYJ = () => {
  dialogVisibleYJ.value = true
}
const handleSeeYJXQ = (row: any) => {
  dialogVisibleYJXQ.value = true
  formYJ.value.webId = row.id
  webCommissionQueryApi({
    webId: row.id,
    type: "公司佣金"
  }).then((res: any) => {
    tableDataYJGS.value = res.data.list
  })
  webCommissionQueryApi({
    webId: row.id,
    type: "店铺佣金"
  }).then((res: any) => {
    tableDataYJDP.value = res.data.list
  })
}
// 添加
const addSettingBW = () => {
  formYJ.value.benwang.push({
    name: "",
    key: ""
  })
}
const addSettingYW = () => {
  formYJ.value.yiwang.push({
    name: "",
    key: ""
  })
}
// 删除
const removeSettingBW = (item: any) => {
  const index = formYJ.value.benwang.indexOf(item)
  if (index !== -1) {
    formYJ.value.benwang.splice(index, 1)
  }
}
const removeSettingYW = (item: any) => {
  const index = formYJ.value.yiwang.indexOf(item)
  if (index !== -1) {
    formYJ.value.yiwang.splice(index, 1)
  }
}
// 确认
const handleCreateYJ = () => {
  formRefYJ.value?.validate((valid: boolean) => {
    if (valid) {
      if (dialogTitle.value == "新增") {
        formYJ.value.executeTime = new Date(formYJ.value.executeTime).getTime()
        formData.value.webCommissionEntity = JSON.parse(JSON.stringify(formYJ.value))
        dialogVisibleYJ.value = false
      } else if (dialogTitle.value == "修改") {
        webCommissionAddApi({
          ...formYJ.value,
          executeTime: new Date(formYJ.value.executeTime).getTime()
        }).then(() => {
          ElMessage.success("修改成功")
          dialogVisibleYJ.value = false
          getList()
        })
      }
    }
  })
}
// 佣金配置
const handleChange = (value: any) => {
  console.log(value, "输入内容")
  if (value == "一次性") {
    formYJ.value.executeMoney = ""
  } else if (value == "分成") {
    formYJ.value.executeMoneyTWO = ""
  }
}
const YJPZvalue = ref(false)
const YJPZ = () => {
  console.log(1)
  YJPZvalue.value = true
}

const BW = ref<any>([]) // 本网合
const YW = ref<any>([]) // 异网合
const baocun = () => {
  // 合并数据
  formYJ.value.benwang.forEach((i: any) => {
    BW.value.push(`政策级别${i.name},级别金额${i.key} `)
  })
  formYJ.value.yiwang.forEach((i: any) => {
    YW.value.push(`政策级别${i.name},级别金额${i.key} `)
  })
  formYJ.value.executeMoney = `本网：${BW.value.join()},异网：${YW.value.join()} `
  formYJ.value.executeMoneyTWO = `本网：${BW.value.join()},异网：${YW.value.join()} `
  // 清空配置内容
  formYJ.value.benwang = [
    {
      name: "",
      key: ""
    }
  ]
  formYJ.value.yiwang = [
    {
      name: "",
      key: ""
    }
  ]
  BW.value = []
  YW.value = []
  YJPZvalue.value = false
}
// 取消弹框
const resetFormYJ = () => {
  YJPZvalue.value = false
  formYJ.value.executeMoneyTWO = ""
  formYJ.value.executeMoney = ""
  formRefYJ.value?.resetFields()
  clearValidate()
}
/**一键复制套餐 */
const handleCopy = async (row: any) => {
  ElMessageBox.confirm(`正在复制宽带产品：${row.name}，将生成一个全新宽带产品，确认复制？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    copyWebCombo(row.id).then((res: any) => {
      if (res.code == 200) {
        ElMessage.success("操作成功")
        getList()
      }
    })
  })
}

// #endregion

/**代理数据 */
const userIdList = ref<any>([])
const userListEffect = () => {
  getUserIdList({}).then((res: any) => {
    console.log(res)
    userIdList.value = res.data
  })
}
userListEffect()
/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getList, { immediate: true })
const clearValidate = () => {
  formRef.value?.clearValidate()
}

// 宽带产品
const downLoad = async () => {
  loading.value = true
  await webdownSet({
    name: searchData.name,
    var1: searchData.var1,
    area: searchData.area.join(","),
    state: searchData.state
  })
    .then((res: any) => {
      const blob = new Blob([res.data], {
        type: "application/xlsx;charset=utf-8"
      })
      const downloadElement = document.createElement("a")
      const href = window.URL.createObjectURL(blob)
      downloadElement.href = href
      downloadElement.download = "宽带产品.xlsx"
      document.body.appendChild(downloadElement)
      downloadElement.click()
      window.URL.revokeObjectURL(href)
    })
    .finally(() => {
      loading.value = false
    })
}
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="name" label="产品名称">
          <el-input v-model.trim="searchData.name" clearable placeholder="请输入" style="width: 240px" />
        </el-form-item>
        <el-form-item prop="area" label="归属省份">
          <el-cascader
            size="large"
            placeholder="可输入地址快速查询"
            :props="props2"
            :options="areaoptions"
            v-model="searchData.area"
            :filterable="true"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item
          prop="var1"
          label="上级名称"
          v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
        >
          <el-select v-model="searchData.var1">
            <el-option v-for="item of superList" :label="item.name" :value="item.id" :key="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
          <el-tooltip content="下载">
            <el-button type="primary" :icon="Download" circle @click="downLoad" />
          </el-tooltip>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 中间部分 -->
    <el-card v-loading="loading" shadow="never">
      <!-- 顶部添加职位 -->
      <div class="middle-top">
        <div>
          <el-button
            type="primary"
            el-button
            v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
            @click="addProduct"
            >添加宽带产品</el-button
          >
        </div>
      </div>
      <!-- 中间渲染内容 -->
      <div class="table-center" l>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="已上架产品" name="shelf" />
          <el-tab-pane label="已下架产品" name="offShelf" />
        </el-tabs>
        <el-table :data="tableData">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="id" label="ID" width="120" align="center" />
          <el-table-column prop="name" label="产品名称" align="center" />
          <!-- <el-table-column prop="provinces" label="归属省份" align="center" /> -->
          <el-table-column
            prop="var1"
            label="上级名称"
            align="center"
            :formatter="formatterSuperName"
            v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
          />
          <el-table-column
            prop="code"
            label="上级编码"
            align="center"
            v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
          />
          <!-- <el-table-column prop="details" label="产品详情" align="center" /> -->
          <el-table-column prop="operator" label="运营商" align="center" />
          <el-table-column prop="note" label="产品备注" align="center" />
          <el-table-column prop="state" label="上下架" align="center">
            <template #default="scope">
              <span :style="{ color: scope.row.state === '上架' ? '#67c23a' : '#f56c6c' }">{{ scope.row.state }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="activeName === 'shelf'" prop="createTime" label="上架时间" align="center">
            <template #default="scope"> {{ formatDateTime(scope.row.createTime) }} </template>
          </el-table-column>
          <el-table-column v-else prop="updateTime" label="下架时间" align="center">
            <template #default="scope"> {{ formatDateTime(scope.row.updateTime) }} </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="scope">
              <el-button
                v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
                type="primary"
                text
                bg
                size="small"
                @click="handleUpdate(scope.row)"
                >修改</el-button
              >
              <el-button
                v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
                type="primary"
                text
                bg
                size="small"
                @click="handleCopy(scope.row)"
                >一键复制</el-button
              >
              <el-button
                v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
                type="primary"
                text
                bg
                size="small"
                @click="handleupdateState(scope.row)"
                >{{ formDatastate }}</el-button
              >
              <el-button type="danger" text bg size="small" @click="handleDelete(scope.row)" style="display: none"
                >删除</el-button
              >
              <el-button type="primary" text bg size="small" @click="handleSee(scope.row)">查看详情</el-button>
              <el-button type="primary" text bg @click="handleSeeYJXQ(scope.row)">佣金变更记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :page-size="paginationData.pageSize"
          :total="tableTotal"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" @close="resetForm" width="60%">
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px" label-position="left">
        <el-form-item
          prop="var1"
          label="上级名"
          v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
        >
          <el-select v-model="formData.var1" :disabled="dialogTitle === '详情'">
            <el-option v-for="item of superList" :label="item.name" :value="item.id" :key="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="code"
          label="上级编码"
          v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
        >
          <el-input v-model="formData.code" placeholder="请输入" :disabled="dialogTitle === '详情'" />
        </el-form-item>
        <el-form-item prop="specId" label="上级规格编码">
          <el-input v-model="formData.specId" placeholder="请输入" :disabled="dialogTitle === '详情'" />
        </el-form-item>
        <el-form-item prop="speed" label="宽带速率">
          <el-input v-model="formData.speed" placeholder="请输入" :disabled="dialogTitle === '详情'" />
        </el-form-item>
        <el-form-item prop="superPackInfo" label="上级套餐信息">
          <el-input v-model="formData.superPackInfo" placeholder="请输入" :disabled="dialogTitle === '详情'" />
        </el-form-item>
        <div style="display: flex">
          <el-form-item prop="areaTWo">
            <el-cascader
              :disabled="dialogTitle === '详情'"
              placeholder="可输入地址快速查询"
              :props="props2"
              :options="areaoptions"
              v-model="formData.areaTWo"
              :filterable="true"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item prop="yunying">
            <el-select v-model="formData.yunying" :disabled="dialogTitle === '详情'" style="width: 100px">
              <el-option label="电信" value="电信" />
              <el-option label="联通" value="联通" />
              <el-option label="移动" value="移动" />
              <el-option label="广电" value="广电" />
            </el-select>
          </el-form-item>
          <el-form-item prop="kb">
            <el-select v-model="formData.kb" :disabled="dialogTitle === '详情'" style="width: 100px">
              <el-option label="50M" value="50M" />
              <el-option label="100M" value="100M" />
              <el-option label="200M" value="200M" />
              <el-option label="300M" value="300M" />
              <el-option label="500M" value="500M" />
              <el-option label="600M" value="600M" />
              <el-option label="1000M" value="1000M" />
            </el-select>
          </el-form-item>
          <el-form-item prop="leix">
            <el-select v-model="formData.leix" :disabled="dialogTitle === '详情'" style="width: 100px">
              <el-option label="单宽" value="单宽" />
              <el-option label="融合" value="融合" />
            </el-select>
          </el-form-item>
          <p style="line-height: 1px">——</p>
          <el-form-item prop="moneyOne" style="width: 150px">
            <el-input v-model="formData.moneyOne" :disabled="dialogTitle === '详情'" placeholder="请输入">
              <template #append>元包</template>
            </el-input>
          </el-form-item>

          <el-form-item prop="moneyTwo" style="width: 100px">
            <el-input v-model="formData.moneyTwo" :disabled="dialogTitle === '详情'" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="shij" style="width: 100px">
            <el-select v-model="formData.shij" :disabled="dialogTitle === '详情'" style="width: 100%">
              <el-option label="年" value="年" />
              <el-option label="月" value="月" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formData.beiz" :disabled="dialogTitle === '详情'" placeholder="请输入" />
          </el-form-item>
          <el-button type="success" @click="GBareaTwo" :disabled="dialogTitle === '详情'" round>确认</el-button>
        </div>
        <el-form-item prop="name" label="产品名称">
          <el-input v-model="formData.name" disabled placeholder="请输入" />
        </el-form-item>

        <el-form-item prop="operator" label="运营商">
          <el-select v-model="formData.operator" :disabled="dialogTitle === '详情'" style="width: 100px">
            <el-option label="移动" value="移动" />
            <el-option label="联通" value="联通" />
            <el-option label="电信" value="电信" />
            <el-option label="广电" value="广电" />
            <el-option label="全国" value="全国" />
          </el-select>
        </el-form-item>
        <el-form-item prop="details" label="详情">
          <Editor :value="formData.details" @updateValue="getMsg" v-if="dialogTitle !== '详情'" />
          <div v-else>
            <div v-if="formData.details && formData.details != '<p><br/></p>'" v-html="formData.details" />
            <el-empty v-else description="暂无内容" />
          </div>
        </el-form-item>

        <el-form-item prop="age" label="年龄限制">
          <el-input
            :disabled="dialogTitle === '详情'"
            type="number"
            style="width: 46%"
            v-model="formData.minAge"
            :min="1"
            placeholder="请输入最小年龄"
            oninput="if(value.length>2)value=value.slice(0, 2)"
          />
          <span style="display: inline-block; padding: 0 2%">至</span>
          <el-input
            :disabled="dialogTitle === '详情'"
            type="number"
            style="width: 46%"
            :min="1"
            v-model="formData.maxAge"
            placeholder="请输入最大年龄"
            oninput="if(value.length>2)value=value.slice(0, 2)"
          />
        </el-form-item>
        <el-form-item
          prop="team"
          label="可销售团队"
          v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
        >
          <el-cascader
            :disabled="dialogTitle === '详情'"
            size="large"
            placeholder="可输入快速查询"
            :props="props1"
            :options="departTeam"
            v-model="formData.team"
            :filterable="true"
            :show-all-levels="false"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item prop="open" label="对分销商开放">
          <el-select v-model="formData.open" :disabled="dialogTitle === '详情'" style="width: 100%">
            <el-option label="是" value="是" />
            <el-option label="否" value="否" />
          </el-select>
        </el-form-item>
        <el-form-item prop="userIds" label="可销售分销商">
          <el-select
            :disabled="formData.open !== '是' || dialogTitle === '详情'"
            v-model="formData.userIds"
            clearable
            filterable
            multiple
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option
              v-for="item in userIdList"
              :key="item.user_id"
              :label="item.user_name"
              :value="item.user_id + ''"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="var2" label="可安装区域">
          <el-cascader
            :disabled="dialogTitle === '详情'"
            size="large"
            :props="props"
            placeholder="可输入地址快速查询"
            :options="areaoptions"
            v-model="formData.var2"
            :filterable="true"
            style="width: 100%"
          />
        </el-form-item>
        <!-- <el-form-item prop="provinces" label="归属省份">
          <el-input v-model="formData.provinces" placeholder="请输入" :disabled="dialogTitle === '详情'" />
        </el-form-item> -->
        <el-form-item prop="isPhoto" label="上传图片">
          <el-select v-model="formData.isPhoto" :disabled="dialogTitle === '详情'">
            <el-option :key="1" label="是" value="是" />
            <el-option :key="2" label="否" value="否" />
          </el-select>
        </el-form-item>
        <el-form-item prop="handSubmit" label="是否手动提单">
          <el-select v-model="formData.handSubmit" clearable placeholder="请选择" :disabled="dialogTitle === '详情'">
            <el-option :key="1" label="否" :value="0" />
            <el-option :key="2" label="是" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item prop="terminal" label="终端类型">
          <el-select v-model="formData.terminal" clearable placeholder="请选择" :disabled="dialogTitle === '详情'">
            <el-option :key="1" label="光猫" value="光猫" />
            <el-option :key="2" label="FTTR" value="FTTR" />
          </el-select>
        </el-form-item>
        <el-form-item prop="note" label="备注">
          <el-input type="textarea" v-model="formData.note" placeholder="请输入" :disabled="dialogTitle === '详情'" />
        </el-form-item>
        <el-form-item prop="yearFee" label="包年费">
          <el-input v-model="formData.yearFee" placeholder="请输入" :disabled="dialogTitle === '详情'" />
        </el-form-item>
        <el-form-item prop="testFee" label="宽带调测费">
          <el-input v-model="formData.testFee" placeholder="请输入" :disabled="dialogTitle === '详情'" />
        </el-form-item>
        <el-form-item prop="tvFee" label="TV(月费及调测费)">
          <el-input v-model="formData.tvFee" placeholder="请输入" :disabled="dialogTitle === '详情'" />
        </el-form-item>
      </el-form>
      <div v-show="dialogTitle !== '详情'">
        <el-form-item
          prop="note"
          label="产品佣金"
          v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
        >
          <el-button type="primary" style="margin-left: 30px" @click="handleSeeYJ">佣金配置</el-button>
        </el-form-item>
      </div>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreate" v-if="dialogTitle !== '详情'">确认</el-button>
      </template>
    </el-dialog>

    <!-- 佣金弹窗添加 -->
    <el-dialog v-model="dialogVisibleYJ" @close="resetFormYJ" width="60%">
      <el-form ref="formRefYJ" :inline="true" :model="formYJ" :rules="rules" label-width="100px">
        <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
          <div style="width: 33%">
            <el-card>
              <el-form-item prop="type" label="类型">
                <el-select v-model="formYJ.type">
                  <el-option label="店铺佣金" value="店铺佣金" />
                  <el-option label="公司佣金" value="公司佣金" />
                </el-select>
              </el-form-item>
              <el-form-item prop="executeTime" label="执行时间">
                <el-date-picker :disabled-date="disabledDate" v-model="formYJ.executeTime" type="datetime" />
              </el-form-item>
              <el-form-item prop="jsType" label="结算类型">
                <el-select v-model="formYJ.jsType" @change="handleChange">
                  <el-option label="一次性" value="一次性" />
                  <el-option label="分成" value="分成" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="formYJ.jsType !== '分成'" prop="executeMoney" label="执行金额">
                <el-input v-model="formYJ.executeMoney" placeholder="请输入" />
              </el-form-item>
              <el-form-item v-if="formYJ.jsType == '分成'" prop="executeMoneyTWO" label="执行金额">
                <el-input autosize disabled v-model="formYJ.executeMoneyTWO" type="textarea" />
                <el-button @click="YJPZ">配置</el-button>
              </el-form-item>
              <el-form-item prop="var" label="自定义">
                <el-input v-model="formYJ.var" placeholder="请输入" />
              </el-form-item>
            </el-card>
          </div>
          <div style="width: 65%">
            <el-card v-if="YJPZvalue == true">
              <el-form-item
                v-for="(item, index) in formYJ.benwang"
                :key="index"
                :label="'本网' + (index + 1)"
                label-width="50px"
              >
                <el-form-item label="政策级别" label-width="70px">
                  <!-- <el-input v-model.trim="item.name" style="width: 80px" /> -->
                  <el-select v-model="item.name" style="width: 80px">
                    <!-- <el-option label="T+1" value="T+1" />
                    <el-option label="T+2" value="T+2" />
                    <el-option label="T+3" value="T+3" />
                    <el-option label="T+4" value="T+4" />
                    <el-option label="T+5" value="T+5" />
                    <el-option label="T+6" value="T+6" />
                    <el-option label="T+7" value="T+7" />
                    <el-option label="T+8" value="T+8" /> -->
                    <el-option v-for="(item, index) in 24" :key="index" :label="`T+${item}`" :value="`T+${item}`" />
                  </el-select>
                </el-form-item>
                <el-form-item label="级别金额" label-width="70px">
                  <el-input v-model.trim="item.key" style="width: 80px" />
                </el-form-item>
                <el-form-item>
                  <el-button @click.prevent="removeSettingBW(item)">删除</el-button>
                  <el-button @click="addSettingBW()">新增设置</el-button>
                </el-form-item>
              </el-form-item>
              <el-form-item
                v-for="(item, index) in formYJ.yiwang"
                :key="index"
                :label="'异网' + (index + 1)"
                label-width="50px"
              >
                <el-form-item label="政策级别" label-width="70px">
                  <!-- <el-input v-model.trim="item.name" style="width: 80px" /> -->
                  <el-select v-model="item.name" style="width: 80px">
                    <el-option v-for="(item, index) in 24" :key="index" :label="`T+${item}`" :value="`T+${item}`" />
                    <!-- <el-option label="T+1" value="T+1" />
                    <el-option label="T+2" value="T+2" />
                    <el-option label="T+3" value="T+3" />
                    <el-option label="T+4" value="T+4" />
                    <el-option label="T+5" value="T+5" />
                    <el-option label="T+6" value="T+6" />
                    <el-option label="T+7" value="T+7" />
                    <el-option label="T+8" value="T+8" /> -->
                  </el-select>
                </el-form-item>
                <el-form-item label="级别金额" label-width="70px">
                  <el-input v-model.trim="item.key" style="width: 80px" />
                </el-form-item>
                <el-form-item>
                  <el-button @click.prevent="removeSettingYW(item)">删除</el-button>
                  <el-button @click="addSettingYW()">新增设置</el-button>
                </el-form-item>
              </el-form-item>
              <el-button @click="YJPZvalue = false">取消</el-button>
              <el-button @click="baocun">保存</el-button>
            </el-card>
          </div>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisibleYJ = false">取消</el-button>
        <el-button type="primary" @click="handleCreateYJ">确认</el-button>
      </template>
    </el-dialog>
    <!-- 佣金弹窗详情 -->
    <el-dialog v-model="dialogVisibleYJXQ" width="75%">
      <div style="display: flex; justify-content: space-between">
        <el-card>
          <el-table :data="tableDataYJGS" border style="width: 100%" max-height="500">
            <el-table-column prop="id" label="id" />
            <el-table-column prop="type" label="类型" />
            <el-table-column prop="executeTime" label="执行时间">
              <template #default="scope"> {{ formatDateTime(scope.row.executeTime) }} </template>
            </el-table-column>
            <el-table-column prop="jsType" label="结算类型" />
            <el-table-column prop="executeMoney" label="执行金额" width="240" />
            <el-table-column prop="var" label="自定义" /> </el-table
        ></el-card>
        <el-card>
          <el-table :data="tableDataYJDP" border style="width: 100%" max-height="500">
            <el-table-column prop="id" label="id" />
            <el-table-column prop="type" label="类型" />
            <el-table-column prop="executeTime" label="执行时间">
              <template #default="scope"> {{ formatDateTime(scope.row.executeTime) }} </template>
            </el-table-column>
            <el-table-column prop="jsType" label="结算类型" />
            <el-table-column prop="executeMoney" label="执行金额" width="240" />
            <el-table-column prop="var" label="自定义" /> </el-table
        ></el-card>
      </div>
      <template #footer>
        <el-button type="primary" @click="dialogVisibleYJXQ = false">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
// .box-card {
//   height: 70px;
//   margin-bottom: 20px;
// }
.search-wrapper {
  margin-bottom: 20px;
}
.middle-top {
  margin-bottom: 20px;
}
.table-center {
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
}
:deep(.el-form-item__content) {
  margin-left: 0 !important;
}
</style>
